<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI测试用例生成器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        neutral: '#64748b',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .chat-bubble-user {
                @apply bg-primary text-white rounded-lg rounded-tl-none p-4 max-w-[80%] self-end;
            }
            .chat-bubble-ai {
                @apply bg-gray-100 text-gray-800 rounded-lg rounded-tr-none p-4 max-w-[80%] self-start;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <header class="mb-8 text-center">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">AI测试用例生成器</h1>
            <p class="text-gray-600">输入需求，让AI帮你生成详细的测试用例</p>
        </header>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden flex flex-col h-[80vh]">
            <!-- 模型选择栏 -->
            <div class="p-4 border-b border-gray-200 bg-gray-50 flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-cogs text-primary"></i>
                    <span class="font-medium text-gray-700">模型选择</span>
                </div>
                <div class="flex items-center space-x-2">
                    <select id="model-selector" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50">
                        <option value="deepseek">DeepSeek</option>
                        <option value="openai">OpenAI</option>
                        <option value="tongyi">通义千问</option>
                    </select>
                </div>
            </div>

            <!-- 聊天内容区域 -->
            <div id="chat-container" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide">
                <div class="flex flex-col space-y-2">
                    <div class="chat-bubble-ai">
                        <p>您好！我是AI测试用例生成助手。请输入您的测试需求，我会为您生成详细的测试用例。</p>
                    </div>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-4 border-t border-gray-200 bg-gray-50">
                <div class="flex flex-col space-y-2">
                    <textarea
                        id="prompt-input"
                        placeholder="请输入您的测试需求..."
                        class="w-full border border-gray-300 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none h-24"
                    ></textarea>
                    <div class="flex justify-end">
                        <button
                            id="generate-btn"
                            class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition-colors duration-200"
                        >
                            <i class="fa fa-paper-plane"></i>
                            <span>生成测试用例</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const chatContainer = document.getElementById('chat-container');
            const promptInput = document.getElementById('prompt-input');
            const generateBtn = document.getElementById('generate-btn');
            const modelSelector = document.getElementById('model-selector');

            // 生成测试用例
            generateBtn.addEventListener('click', function() {
                const prompt = promptInput.value.trim();
                if (!prompt) {
                    alert('请输入测试需求');
                    return;
                }

                const model = modelSelector.value;

                // 添加用户输入到聊天窗口
                addMessageToChat(prompt, 'user');
                promptInput.value = '';

                // 显示加载状态
                const loadingElement = addLoadingToChat();

                // 调用API生成测试用例
                fetch('/ai-test-case/generate/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        prompt: prompt,
                        model: model
                    })
                })
                .then(response => response.json())
                .then(data => {
                    // 移除加载状态
                    loadingElement.remove();

                    if (data.success) {
                        // 添加AI生成的测试用例到聊天窗口
                        addMessageToChat(data.test_case, 'ai');
                    } else {
                        addMessageToChat('生成测试用例失败: ' + data.error, 'ai');
                    }
                })
                .catch(error => {
                    // 移除加载状态
                    loadingElement.remove();
                    addMessageToChat('请求失败: ' + error.message, 'ai');
                });
            });

            // 添加消息到聊天窗口
            function addMessageToChat(message, sender) {
                const messageElement = document.createElement('div');
                messageElement.className = 'flex flex-col space-y-1';

                const bubbleElement = document.createElement('div');
                bubbleElement.className = sender === 'user' ? 'chat-bubble-user' : 'chat-bubble-ai';

                // 格式化消息内容（将换行符转换为<br>）
                bubbleElement.innerHTML = message.replace(/\n/g, '<br>');

                messageElement.appendChild(bubbleElement);
                chatContainer.appendChild(messageElement);

                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }

            // 添加加载状态到聊天窗口
            function addLoadingToChat() {
                const loadingElement = document.createElement('div');
                loadingElement.className = 'flex flex-col space-y-1';

                const bubbleElement = document.createElement('div');
                bubbleElement.className = 'chat-bubble-ai flex items-center space-x-2';

                const dot1 = document.createElement('span');
                dot1.className = 'w-2 h-2 bg-gray-400 rounded-full animate-bounce';
                dot1.style.animationDelay = '0ms';

                const dot2 = document.createElement('span');
                dot2.className = 'w-2 h-2 bg-gray-400 rounded-full animate-bounce';
                dot2.style.animationDelay = '150ms';

                const dot3 = document.createElement('span');
                dot3.className = 'w-2 h-2 bg-gray-400 rounded-full animate-bounce';
                dot3.style.animationDelay = '300ms';

                bubbleElement.appendChild(dot1);
                bubbleElement.appendChild(dot2);
                bubbleElement.appendChild(dot3);

                loadingElement.appendChild(bubbleElement);
                chatContainer.appendChild(loadingElement);

                // 滚动到底部
                chatContainer.scrollTop = chatContainer.scrollHeight;

                return loadingElement;
            }

            // 支持按Enter键发送消息
            promptInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    generateBtn.click();
                }
            });
        });
    </script>
</body>
</html>